<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <title>Document</title>
    <style>
         .biye {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div id="tab">
        <table border="1">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>class</th>
                <th>操作</th>
            </tr>

            <tr v-for='(item,index) in arr'>
                <td >{{index+1}}</td>
                <td :class='{biye:item.xianval}'>{{item.name}}</td>
                <td >{{item.class}}</td>
                <td><button @click.once='changeclass(index)'>毕业</button><button @click='del(index)'>删除</button><button @click='gai(index)'>修改</button></td>
            </tr>


        </table>
        <button @click='tianjia()'>添加</button>

        <div class="boo" v-show='show'>
            id<input type="text" v-model='id'>
            <br>
            姓名<input type="text" v-model='name'>
            <br>
            <form action="">
                班级<select name="class" v-model='classs'>
                    <option value="1">1班</option>
                    <option value="2">2班</option>
                </select>
            </form>
            <button @click='add()'>提交</button>
        </div>
       
    </div>
    <input type="text" v-model.number='age'>
    <script>
        new Vue({
            el: '#tab',
            data() {
                return {
                    arr: [
                        {
                            //id: 1,
                            name: 'aaa',
                            class: '1班',
                            xianval: false,
                        },
                        {
                            //id: 2,
                            name: 'bbb',
                            class: '2班', xianval: false,
                        },
                        {
                            //id: 3,
                            name: 'ccc',
                            class: '2班', xianval: false,
                        },
                        {
                            //id: 4,
                            name: 'ddd',
                            class: '2班', xianval: false,
                        }
                    ],
                    id:'',
                    name:'',
                    classs:'',
                    show:false,
                    a:0,
                    index:0
                }
            },
            methods: {
                //添加按钮事件
                tianjia(){
                    this.show=true;
                },
                //增加表格条数
                add(){
                    //console.log(55555);
                    if(this.a){
                        this.arr[this.index]={
                            name:this.name,
                            class:this.classs
                        }
                    }
                      else{
                        this.arr.push({
                        //id:this.id,
                        name:this.name,
                        class:this.classs
                    })
                      }  
                },
                //删除表格
                del(index){
                    if(confirm('确定要删除吗')){
                        this.arr.splice(index,1)
                    }else{
                        alert('删除失败');
                    }
                },
                //xiugai
                gai(index){
                    this.show=true;
                    this.name=this.arr[index].name;
                   // this.id=this.arr[index].id;
                   // this.class=this.arr[index].classs;
                   // console.log(777);
                   this.a=1
                   
                },
                changeclass(index) {
                    this.arr[index].xianval = !this.arr[index].xianval;
                    this.index=index;
                },
            }
        })
    </script>
</body>

</html>